<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 可以触发界面更新，修改原本就存在的属性可以触发界面更新 -->
        <button @click=" obj.name = 'rose' ">修改name</button>

        <!-- 如果动态给对象添加一个新的属性，无法触发界面更新 -->
        <button @click=" obj.score = 99 ">添加属性 -- 无法触发更新</button>

        <!-- 给obj添加score属性且属性值为99，并且能触发界面更新 -->
        <button @click=" $set(obj, 'score', 99) ">添加属性 -- 能触发更新</button>
        <ul>
            <!-- obj有多少个属性，这里就会产生多少个li -->
            <!-- item就是每个属性值 -->
            <li v-for="item in obj">{{ item }}</li>
        </ul>

        <ul>
            <!-- obj有多少个属性，这里就会产生多少个li -->
            <!-- item就是每个属性值 -->
            <!-- key就是每个属性名 -->
            <!-- <li v-for="(item, key) in obj">{{ item }} -- {{ key }}</li> -->

            <!-- 
                名字可以随便写，但是建议遍历对象时，属性值就叫value或者val或者v
                属性名就叫 key k
            -->
            <li v-for="(v, k) in obj">{{ v }} -- {{ k }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    obj: {
                        name: 'jack',
                        age: 16,
                        gender: '男'
                    }
                }
            },
        })
    </script>
</body>
</html>